<template>
  <!-- 原参照关系弹框 -->
  <el-dialog
    :visible.sync="originalPriceGroupVisible"
    :modal-append-to-body="false"
    :close-on-click-modal="false"
    title="查看原价格组"
    width="55%"
    @close="handleCloseDialog"
  >
    <el-table
      v-loading="tableLoading"
      :data="tableData"
      :header-cell-style="{ textAlign: 'center' }"
      border="border"
      use-virtual
    >
      <el-table-column
        v-for="column in columns"
        :key="column.key"
        :prop="column.key"
        :label="column.title"
        :property="column.key"
        :align="column.align || 'center'"
        :min-width="column.width || 120"
        :fixed="column.fixed"
        :formatter="column.formatter"
        :show-overflow-tooltip="column.tooltip === 'noTooltip' ? false : true"
      />
    </el-table>
    <div slot="footer" class="dialog-footer">
      <el-button @click="handleCloseDialog">返回</el-button>
    </div>
  </el-dialog>
</template>
<script>
import { ApiRequest } from '@api/basePage'
export default {
  props: {
    visible: {
      type: Boolean,
      required: true
    },
    columns: {
      type: Array,
      default () {
        return [
          {
            title: '组名称',
            key: 'groupName',
            align: 'center'
          },
          {
            title: '城市',
            key: 'mainCity',
            align: 'center'
          },
          {
            title: '参照组',
            key: 'mainGroupName',
            align: 'center'
          },
          {
            title: '价格比例',
            key: 'rate',
            align: 'center'
          }
        ]
      }
    },
    originalParams: {
      type: Object,
      required: true
    },
    /* 请求数据是否包含在retData的t字段中,取决于后端接口返回的结构 */
    isInTForData: {
      type: Boolean,
      default: false
    },
  },
  data () {
    return {
      originalPriceGroupVisible: this.visible,
      tableData: [],
      tableLoading: false
    }
  },
  watch: {
    visible (newValue) {
      this.originalPriceGroupVisible = newValue
      if (newValue) { this.getOriginalPriceGroupData() }
    },
  },
  methods: {
    getOriginalPriceGroupData () {
      let { data, url, type, dataSource } = this.originalParams
      /* 如果originalParams传有表格数据dataSource，就无需再请求接口获取 */
      if (dataSource) {
        this.tableData = dataSource;
        return true;
      }
      this.tableLoading = true
      ApiRequest(url, type, data).then(res => {
        this.tableLoading = false
        if (res.retStatus !== '1') { return }
        let source = this.isInTForData ? res.retData.t : res.retData;
        this.tableData = source.reduce((value, item) => {
          value.push({
            groupName: item.groupName,
            mainCity: item.mainCity,
            mainGroupName: item.mainGroupName,
            rate: item.rate,
            provinceNameList: item.provinceNameList && item.provinceNameList.join(',')
          })
          return value;
        }, [])
      }).catch(() => {
        this.tableLoading = false
      })
    },
    handleCloseDialog () {
      this.$emit('update:visible', false)
    },
  }
}
</script>
<style lang="less" scoped>
.dialog-footer {
  text-align: center;
}
/deep/ .el-dialog__header {
  border-bottom: 1px solid #ebebeb;
}
/deep/ .el-dialog__body {
  padding: 15px 20px;
}
</style>
